<template>
    <el-dialog
        :title="title"
        :width="size"
        :visible.sync="dialogFormVisible"
        :show-close="!submitting"
        @close="onDialogClose"
    >
        <el-form ref="innerForm" :model="formModel" :rules="formRules" :label-width="labelWidth">
            <slot></slot>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button v-show="!submitting" @click="onCancelClick">{{ button.cancelText }}</el-button>
            <el-button type="primary" :disabled="submitDisabled" :loading="submitting" @click="onSubmitClick">{{ button.confirmText }}</el-button>
        </div>
    </el-dialog>
</template>

<script>
export default {
    name: 'BaseFormDialog',
    props: {
        title: {
            type: String,
            default: '标题'
        },
        formModel: {
            type: Object,
            default: () => ({})
        },
        formRules: {
            type: Object,
            default: () => ({})
        },
        labelWidth: {
            type: String,
            default: '120px'
        },
        size: {
            type: String,
            default: '50%'
        },
        buttonText: {
            type: Object,
            default: () => ({})
        },
        submitDisabled: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            button: Object.assign(
                {
                    cancelText: '取消',
                    confirmText: '确认'
                },
                this.buttonText
            ),
            dialogFormVisible: false,
            submitHandler: null,
            autoReject: true,
            innerResolve: null,
            innerReject: null,
            submitting: false
        }
    },
    created() {},
    methods: {
        onDialogClose() {
            if (this.autoReject) {
                this.innerReject()
            }
        },
        onCancelClick() {
            this.dialogFormVisible = false
        },
        onSubmitClick() {
            this.$refs.innerForm.validate((valid) => {
                if (valid) {
                    this.doSubmit()
                } else {
                    return false
                }
            })
        },
        doSubmit() {
            this.submitting = true
            if (this.submitHandler) {
                this.submitHandler().then(
                    (res) => {
                        this.autoReject = false
                        this.innerResolve(res)
                        this.submitting = false
                        this.dialogFormVisible = false
                    },
                    (res) => {
                        this.submitting = false
                        // 不要执行reject，用户可以再次点击提交
                    }
                )
            } else {
                this.autoReject = false
                this.dialogFormVisible = false
                this.innerResolve(true)
            }
        },
        popup(submitHandler) {
            if (this.$refs.innerForm) {
                this.$refs.innerForm.resetFields()
            }
            this.submitHandler = submitHandler
            this.submitting = false
            this.dialogFormVisible = true
            return new Promise((resolve, reject) => {
                this.innerResolve = resolve
                this.innerReject = reject
            })
        }
    }
}
</script>

<style lang="scss" scoped>
</style>
